<template>
  <div class="role-lists">
    <el-card class="!border-none" shadow="never">
      <div>
        <el-button
          v-perms="['system:tenant:type:add']"
          type="primary"
          @click="handleAdd"
        >
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新增
        </el-button>
      </div>
      <div class="mt-4">
        <div>
          <el-table :data="pager.lists" size="large" v-loading="pager.loading">
            <el-table-column prop="id" label="ID" min-width="100" />
            <el-table-column prop="name" label="名称" min-width="150" />
            <el-table-column
              prop="remark"
              label="备注"
              min-width="150"
              show-overflow-tooltip
            />

            <el-table-column label="状态" prop="status" min-width="100">
              <template #default="{ row }">
                <el-tag class="ml-2" :type="row.status == '1' ? 'danger' : ''">
                  {{ row.status == "1" ? "停用" : "正常" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              min-width="180"
            />
            <el-table-column label="操作" width="190" fixed="right">
              <template #default="{ row }">
                <el-button
                  v-perms="['system:tenant:type:edit']"
                  link
                  type="primary"
                  @click="handleEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-perms="['system:tenant:type:auth']"
                  link
                  type="primary"
                  @click="handleAuth(row)"
                >
                  权限设置
                </el-button>
                <el-button
                  v-perms="['system:tenant:type:del']"
                  link
                  type="danger"
                  @click="handleDelete(row.roleId)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
        </div>
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="succs"
      @close="showEdit = false"
    />

    <el-dialog
      v-model="showAuth"
      title="套餐授权菜单数据"
      width="600px"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <auth-popup ref="authIndexRef" :selTreeData="currentRow.menuIds" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAuth = false">取消</el-button>
          <el-button type="primary" @click="authTenantType"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="tenantType">
import Popup from "@/components/popup/index.vue";
import { typePage, typeAuth } from "@/api/system/tenant";
import { usePaging } from "@/hooks/usePaging";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
import AuthPopup from "./auth.vue";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const authIndexRef = shallowRef<InstanceType<typeof AuthPopup>>();

const showEdit = ref(false);
const showAuth = ref(false);
///存储当前行
const currentRow = ref(null);

const { pager, getLists } = usePaging({
  fetchFun: typePage,
});

const handleAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.setFormData(data);
};

const handleAuth = async (data: any) => {
  currentRow.value = data;
  console.log("currentRow.value", currentRow.value);
  showAuth.value = true;
  //   authIndexRef.value?.setFormData(data.menuIds);
};

/**
 * 点击推荐为套餐设置菜单
 */
const authTenantType = async () => {
  const selKeys = authIndexRef.value?.getDeptAllCheckedKeys();
  console.log("拿到选择节点", selKeys);
  console.log("currentRow.value", currentRow.value);

  typeAuth({ typeId: currentRow.value?.id, menuIds: selKeys })
    .then((re) => {
      console.log(re);
      feedback.msgSuccess("操作成功");
      showAuth.value = false;
    })
    .catch((res) => {
      console.log(res);

      feedback.msgSuccess(res.message);
    });
};

// 删除角色
const handleDelete = async (id: number) => {
  await feedback.confirm("确定要删除？");
  //   await roleDelete(id);
  feedback.msgSuccess("删除成功");
  getLists();
};

onMounted(() => {
  getLists();
  nextTick(() => {
    console.log("authIndexRef-1111-->", authIndexRef);
  });
});
</script>
